<template>
  <div class="execution">
    <el-form :model="dataForm" :inline="true">
      <el-form-item>
        <el-select v-model="shopId" size="small">
          <el-option
            v-for="(item,index) in shopList"
            :key="item.id"
            :label="item.shopName"
            :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="订单编号">
        <el-input size="small" v-model="dataForm.orderId" placeholder="请输入订单编号" clearable/>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="time"
          type="daterange"
          size="small"
          range-separator="至"
          value-format="yyyy-MM-dd"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          clearable>
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-radio-group v-model="dataForm.type" size="small">
          <el-radio-button>全部</el-radio-button>
          <el-radio-button :label="1">购买</el-radio-button>
          <el-radio-button :label="2">家政</el-radio-button>
          <el-radio-button :label="3">维修</el-radio-button>
          <el-radio-button :label="4">搭配</el-radio-button>
          <el-radio-button :label="5">洗衣</el-radio-button>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <el-form :model="dataForm" :inline="true">
      <el-form-item>
        <el-radio-group v-model="dataForm.ordertype" @change="getordertype()" size="small">
          <el-radio-button :label="1">全部</el-radio-button>
          <el-radio-button :label="2">未接单</el-radio-button>
          <el-radio-button :label="3">已接单</el-radio-button>
          <el-radio-button :label="4">待付款</el-radio-button>
          <el-radio-button :label="5">待评价</el-radio-button>
          <el-radio-button :label="6">已完成</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button size="small" @click="search()">搜索</el-button>
        <el-button :loading="downloadLoading" size="small" type="primary" icon="el-icon-download"
                   @click="handleload">导出
        </el-button>
      </el-form-item>
    </el-form>
    <el-table
      style="margin-top: 30px"
      stripe
      :data="financeList"
      label-width="120px"
      height="600"
    >
      <el-table-column
        align="center"
        type="index"
        header-align="center"
        min-width="50"
        label="序号">
      </el-table-column>
      <el-table-column align="center" label="类目" prop="type">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.type == 1">购买</el-tag>
          <el-tag v-if="scope.row.type == 2">家政</el-tag>
          <el-tag v-if="scope.row.type == 3">维修</el-tag>
          <el-tag v-if="scope.row.type == 4">搭配</el-tag>
          <el-tag v-if="scope.row.type == 5">洗衣</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="订单编号" prop="orderId"/>
      <el-table-column align="center" label="商铺名称" prop="shopName"/>
      <el-table-column align="center" label="财务主体" prop="hqname">
        <template slot-scope="scope">
          <span>红旗</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="收入（元）" prop="orderAmount"/>
      <el-table-column align="center" label="支出（元） " prop="commission"/>
      <el-table-column align="center" label="配送员提成" prop="commission"/>
      <el-table-column align="center" label="店铺优惠券" prop="discountAmount"/>
      <el-table-column align="center" label="应收订单金额" prop="payAmount"/>
      <el-table-column align="center" label="实际支付金额" prop="payAmount"/>
      <el-table-column align="center" label="支付方式" prop="zhichu">
        <template slot-scope="scope">
          <span v-if="scope.row.payAmount">微信支付</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="购买人" prop="orderMember"/>
      <el-table-column align="center" label="收货人手机号" prop="orderMobile"/>
      <el-table-column align="center" label="下单时间" prop="ctime"/>
      <el-table-column align="center" label="订单完成时间" prop="finishTime"/>
      <el-table-column align="center" label="入账时间" prop="paytime"/>
      <el-table-column
        align="center"
        width="100"
        label=订单状态>
        <template slot-scope="scope">
          <el-tag size="mini"
                  v-if="scope.row.orderStatus === 1 && scope.row.payStatus == 1 && scope.row.serviceStatus === 1 && scope.row.commentStatus === 1">
            未接单
          </el-tag>
          <el-tag size="mini"
                  v-if="scope.row.orderStatus === 1 && scope.row.payStatus == 1 && scope.row.serviceStatus === 2 && scope.row.commentStatus === 1">
            已接单
          </el-tag>
          <el-tag size="mini"
                  v-if="scope.row.orderStatus === 1 && scope.row.payStatus == 3 && scope.row.serviceStatus === 4 && scope.row.commentStatus === 1">
            待付款
          </el-tag>
          <el-tag size="mini"
                  v-if="scope.row.orderStatus === 2 && scope.row.payStatus == 2 && scope.row.serviceStatus === 4 && scope.row.commentStatus === 1">
            未评价
          </el-tag>
          <el-tag size="mini"
                  v-if="scope.row.orderStatus === 1 && scope.row.payStatus == 1 && scope.row.serviceStatus === 2 && scope.row.commentStatus === 2">
            已评价
          </el-tag>
          <el-tag size="mini"
                  v-if="scope.row.orderStatus === 1 && scope.row.payStatus == 1 && scope.row.serviceStatus === 3 && scope.row.commentStatus === 1">
            二次服务
          </el-tag>
          <el-tag size="mini"
                  v-if="scope.row.orderStatus === 2 && scope.row.payStatus == 1 && scope.row.serviceStatus === 5 && scope.row.commentStatus === 1">
            无需付款
          </el-tag>
          <el-tag size="mini"
                  v-if="scope.row.orderStatus === 2 && scope.row.payStatus == 2 && scope.row.serviceStatus === 4 && scope.row.commentStatus === 2">
            已完成
          </el-tag>
          <el-tag size="mini"
                  v-if="scope.row.orderStatus === 2 && scope.row.payStatus == 1 && scope.row.serviceStatus === 1 && scope.row.commentStatus === 1">
            已取消
          </el-tag>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="limit"
      :total="total"
      layout="total, sizes, prev, pager, next, jumper"
      background>
    </el-pagination>
  </div>
</template>

<script>
  import {getAllShops} from '@/api/shop/shops'

  export default {
    name: 'finance',
    data () {
      return {
        shopVal: '全部门店',
        shopId: '',
        shopList: [],
        financeList: [],
        downloadLoading: false,
        time: [],
        currentPage: 1,
        limit: 10,
        list: [],
        total: 0,
        dataForm: {
          name: '',
          orderId: '',
          ordertype: 1,
          type: 0
        },
      }
    },
    mounted: function () {
      this.getFinanceList()
      this.getShopList()
    },
    methods: {
      search () {
        if (this.dataForm.ordertype == 1) {
          this.getFinanceList()
        }
        if (this.dataForm.ordertype == 2) {
          this.getFinanceList(1, 1, 1, 1)
        }
        if (this.dataForm.ordertype == 3) {
          this.getFinanceList(1, 1, 2, 1)
        }
        if (this.dataForm.ordertype == 4) {
          this.getFinanceList(1, 3, 2, 1)
        }
        if (this.dataForm.ordertype == 5) {
          this.getFinanceList(2, 2, 4, 1)
        }
        if (this.dataForm.ordertype == 6) {
          this.getFinanceList(2, 2, 4, 2)
        }
      },
      getShopList () {
        const params = new FormData()
        if (this.$store.state.user.shopId) {
          params.append('shopId', this.$store.state.user.shopId)
        }
        getAllShops(params)
          .then((res) => {
            if (res.data.data) {
              this.shopList = res.data.data
              if (!this.$store.state.user.shopId) {
                this.shopList.unshift({shopName: '全部门店', id: ''})
              }
            }

          })
      },
      getFinanceList (orderStatus, payStatus, serviceStatus, commentStatus) {
        let data = new FormData()
        if (this.dataForm.ordertype == 1) {
          if (this.time) {
            data.append('startTimer', this.time[0] || null)
            data.append('endTimer', this.time[1] || null)
          }
          data.append('shopId', this.shopId)
          data.append('type', this.dataForm.type || 0)
          data.append('orderId', this.dataForm.orderId)
          data.append('currentPage', this.currentPage)
          data.append('limit', this.limit)
          this.$http({
            url: this.$http.adornUrl('/order/order/financeStatistics'),
            method: 'post',
            data: data
          }).then(res => {
            this.financeList = res.data.data.list
            this.total = res.data.data.totalCount
          })
        } else {
          data.append('shopId', this.shopId)
          data.append('type', this.dataForm.type || 0)
          data.append('orderId', '')
          data.append('orderStatus', orderStatus)
          data.append('payStatus', payStatus)
          data.append('serviceStatus', serviceStatus)
          data.append('commentStatus', commentStatus)
          data.append('startTimer', this.time[0] || '')
          data.append('endTimer', this.time[1] || '')
          data.append('currentPage', this.currentPage)
          data.append('limit', this.limit)
          this.$http({
            url: this.$http.adornUrl('/order/order/financeStatistics'),
            method: 'post',
            data: data
          }).then(res => {
            this.financeList = res.data.data.list
            this.total = res.data.data.totalCount
          })
        }
      },
      getordertype () {
        switch (this.dataForm.ordertype) {
          case 1:
            this.getFinanceList()
            break
          case 2:
            this.getFinanceList(1, 1, 1, 1)
            break
          case 3:
            this.getFinanceList(1, 1, 2, 1)
            break
          case 4:
            this.getFinanceList(1, 3, 2, 1)
            break
          case 5:
            this.getFinanceList(2, 2, 4, 1)
            break
          case 6:
            this.getFinanceList(2, 2, 4, 2)
            break
        }
      },
      // handleDownload () {
      //   this.downloadLoading = true
      //   import('@/vendor/Export2Excel').then(excel => {
      //     const filterVal = ['shopName', 'ordercount', 'ordersum']
      //     const tHeader = ['商铺名称', '销量', '成交金额']
      //     const data = this.formatJson(filterVal, this.financeList)
      //     excel.export_json_to_excel({
      //       header: tHeader,
      //       data,
      //       filename: '财务统计'
      //     })
      //     this.downloadLoading = false
      //   })
      // },
      // 课程管理导出
      handleload () {
        switch (this.dataForm.ordertype) {
          case 1:
            this.handleDownload()
            break
          case 2:
            this.handleDownload(1, 1, 1, 1)
            break
          case 3:
            this.handleDownload(1, 1, 2, 1)
            break
          case 4:
            this.handleDownload(1, 3, 2, 1)
            break
          case 5:
            this.handleDownload(2, 2, 4, 1)
            break
          case 6:
            this.handleDownload(2, 2, 4, 2)
            break
        }
      },
      handleDownload (orderStatus, payStatus, serviceStatus, commentStatus) {
        const data = new FormData()
        if (this.time) {
          data.append('startTimer', this.time[0] || null)
          data.append('endTimer', this.time[1] || null)
        }
        data.append('orderStatus', orderStatus)
        data.append('payStatus', payStatus)
        data.append('serviceStatus', serviceStatus)
        data.append('commentStatus', commentStatus)
        data.append('shopId', this.shopId)
        data.append('type', 0)
        data.append('orderId', this.dataForm.orderId)
        data.append('currentPage', 1)
        data.append('limit', 99999)
        this.$http({
          url: this.$http.adornUrl('/order/order/financeStatistics'),
          method: 'post',
          data: data
        }).then(res => {
          console.log(res)
          this.list = res.data.data
          // this.total = res.data.data.totalCount
          this.downloadLoading = true
          import('@/vendor/Export2Excel').then(excel => {
            const tHeader = ['类目', '订单编号', '店铺名称', '收入', '支出', '配送员提成', '店铺优惠券', '应收订单金额', '实际支付金额', '订单用户', '收货人手机号', '下单时间', '订单完成时间', '入账时间', '订单状态']
            const filterVal = ['type', 'orderId', 'shopName', 'orderAmount', 'commission', 'commission', 'discountAmount', 'payAmount', 'payAmount', 'orderMember', 'orderMobile', 'ctime', 'finishTime', 'paytime', 'orderStatus']
            const data = this.formatJson(filterVal, this.list)
            excel.export_json_to_excel({
              header: tHeader,
              data,
              filename: '订单 ' + new Date().toLocaleDateString()
            })
            this.downloadLoading = false
          })
        })
      },
      formatJson (filterVal, jsonData) {
        console.log(jsonData)
        return jsonData.map(v => filterVal.map(j => {
          if (j === 'type') {
            if (v[j] === 1) {
              return '购买'
            } else if (v[j] === 2) {
              return '家政'
            } else if (v[j] === 3) {
              return '维修'
            } else if (v[j] === 4) {
              return '搭配'
            } else {
              return '洗衣'
            }
          } else if (j === 'orderStatus') {
            if (v[j] === 1) {
              return '未完成'
            } else if (v[j] === 2) {
              return '已完成'
            } else if (v[j] === 3) {
              return '已取消'
            } else {
              return ''
            }
          } else if (j === 'serviceStatus') {
            if (v[j] === 1) {
              return '未接单'
            } else if (v[j] === 2) {
              return '已接单'
            } else if (v[j] === 3) {
              return '二次接单'
            } else if (v[j] === 4) {
              return '配送完成'
            } else {
              return ''
            }
          } else {
            return v[j]
          }
        }))
      },
      handleSizeChange (val) {
        this.limit = val
        this.currentPage = 1
        switch (this.dataForm.ordertype) {
          case 1:
            this.getFinanceList()
            break
          case 2:
            this.getFinanceList(1, 1, 1, 1)
            break
          case 3:
            this.getFinanceList(1, 1, 2, 1)
            break
          case 4:
            this.getFinanceList(1, 3, 2, 1)
            break
          case 5:
            this.getFinanceList(2, 2, 4, 1)
            break
          case 6:
            this.getFinanceList(2, 2, 4, 2)
            break
        }
      },
      handleCurrentChange (val) {
        this.currentPage = val
        this.limit = 10
        switch (this.dataForm.ordertype) {
          case 1:
            this.getFinanceList()
            break
          case 2:
            this.getFinanceList(1, 1, 1, 1)
            break
          case 3:
            this.getFinanceList(1, 1, 2, 1)
            break
          case 4:
            this.getFinanceList(1, 3, 2, 1)
            break
          case 5:
            this.getFinanceList(2, 2, 4, 1)
            break
          case 6:
            this.getFinanceList(2, 2, 4, 2)
            break
        }
      },
      timeChange (time) {
        // this.time = time
        // this.getList()
        this.getFinanceList()
      },
    }
  }
</script>

<style lang="scss" scoped>
</style>
